<template>
    <section>
        <el-dialog :title="dialogTitle" width="900" :visible.sync="dialogVisible">
            <div class="title">账户基本信息</div>
            <el-divider></el-divider>
            <div class="item">
                <label>用户编号：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>用户名：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>绑定手机号：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>账户状态：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            
            <div class="title">用户信息</div>
            <el-divider></el-divider>
            <div class="item">
                <label>终端客户名称：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>所属区域：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>药店地址：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>药店负责人：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>联系电话：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <el-row>
                <label>企业性质：</label>
                <div class="next-row">
                    <el-checkbox-group :value="row.checkList">
                        <el-checkbox label="医疗机构" disabled></el-checkbox>
                        <el-checkbox label="零售连锁" disabled></el-checkbox>
                        <el-checkbox label="零售药店" disabled></el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-row>
            
            <div class="title">收货信息</div>
            <el-divider></el-divider>
            <div class="item">
                <label>收货人：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>收货人电话：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>收货区域：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            <div class="item">
                <label>收货地址：</label>
                <div class="value">{{row.clientName}}</div>
            </div>
            
            <div class="title">证件信息</div>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="8">
                    <div class="imgbox">
                        <img :src="row.src" alt="" clickable title="营业执照">
                    </div>
                    <p>营业执照</p>
                </el-col>
                <el-col :span="8">
                    <div class="imgbox">
                        <img :src="row.src" alt="" clickable title="营业执照">
                    </div>
                    <p>营业执照</p>
                </el-col>
                <el-col :span="8">
                    <div class="imgbox">
                        <img :src="row.src" alt="" clickable title="营业执照">
                    </div>
                    <p>营业执照</p>
                </el-col>
            </el-row>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
    export default {
        name: 'dialogClient',
        data() {
            return {
                dialogTitle: '',
                dialogVisible: false,
                row: {
                    checkList: ['医疗机构'],
                    src: require('@/assets/404_images/404.png')
                },
            }
        },
        methods: {
            open(row) {
                this.row = Object.assign(this.row,row)
                this.dialogTitle = '终端客户信息--' + row.name
                this.dialogVisible = true
                /*获取会员详情*/
            },
        }
    }
</script>

<style scoped>
    .item{display: inline-block;margin-bottom: 15px;}
    label{color: #a5a5a5;width: 120px;display: inline-block;text-align: right;}
    .value{color: #333333;width: 240px;display: inline-block;}
    .next-row{width: calc(100% - 140px);display: inline-block;}
    .imgbox{width: 100%;height: 180px;text-align: center;line-height: 180px;}
    .imgbox img{vertical-align: middle;max-width: 100%;max-height: 100%;}
    p{text-align: center;}
</style>
